<template>
    <div id="app">
        <el-card shadow="always">
            <el-form :inline="true" size="medium" :model="studentSearch" class="demo-form-inline">
                <!--条件查询-->
                <el-form-item>
                    <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="studentSearch.cid" placeholder="所在班级">
                        <el-option label="所有班级" value="0"></el-option>
                        <el-option :label="c.cname" :value="c.cid" v-for="c in classesList" :key="c.cid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" plain @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" plain @click="addStudent">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" icon="el-icon-remove" plain @click="handleDelete">批量删除</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="studentList"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column
                        label="学号"
                        align="center"
                        prop="sid"
                        width="180"/>
                <el-table-column
                        label="姓名"
                        prop="sname"
                        align="center"/>
                <el-table-column
                        label="性别"
                        prop="sex"
                        align="center"/>
                <el-table-column
                        label="年龄"
                        prop="age"
                        align="center"/>
                <el-table-column
                        label="住址"
                        prop="addr"
                        align="center"/>
                <el-table-column
                        label="所在班级"
                        prop="cname"
                        align="center"/>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页导航面板-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--对话框-->
        <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
            <el-form :model="student">
                <el-form-item label="学生姓名" :label-width="formLabelWidth">
                    <el-input v-model="student.sname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生性别" :label-width="formLabelWidth">
                    <el-radio v-model="student.sex" label="男">男</el-radio>
                    <el-radio v-model="student.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="学生年龄" :label-width="formLabelWidth">
                    <el-input v-model="student.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生住址" :label-width="formLabelWidth">
                    <el-input v-model="student.addr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在班级" :label-width="formLabelWidth" style="width: 1200px">
                    <el-select v-model="student.cid" placeholder="请选择所在班级">
                        <el-option label="所有班级" value="0"></el-option>
                        <el-option :label="c.cname" :value="c.cid" v-for="c in classesList" :key="c.cid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveStudent">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import studentApi from "@/api/student"
    import classesApi from "@/api/classes"

    export default {
        data() {
            return {
                studentList: [],
                classesList: [],   // 所有班级
                page: 1,        // 当前面
                pageSize: 5,    // 每页显示记录条数
                total: 100,     // 总记录数
                studentSearch: {}, // 查询条件对象
                student: {},
                title: '添加',
                dialogFormVisible: false,
                formLabelWidth: '100px',
                multipleSelection: [],     // 代表选中的多项
                sids: [],
            }
        },
        created() {
            this.search()
            this.findAllClasses()
        },
        methods: {
            // 1. 查询所有学生
            async findStudents() {
                const {data: res} = await studentApi.findAllStudents()
                console.log(res)
                if (data.code === 200) {
                    this.studentList = res.data.list
                }
            },
            // 2. 分页查询
            async findByPage() {
                const {data: res} = await studentApi.findByPage(this.page, this.pageSize)
                console.log(res)
                if (res.code === 200) {
                    this.studentList = res.data.pr.rows
                    this.total = res.data.pr.total
                }
            },
            // 3. 查询所有班级
            async findAllClasses() {
                const {data: res} = await classesApi.findAllClasses()
                console.log(res)
                if (res.code === 200) {
                    this.classesList = res.data.list
                }
            },
            // 4. 条件查询带分页
            async search() {
                const {data: res} = await studentApi.search(this.page, this.pageSize, this.studentSearch)
                console.log(res)
                if (res.code === 200) {
                    this.studentList = res.data.pr.rows
                    this.total = res.data.pr.total
                }
            },
            //5.新增
            async saveStudent() {
                console.log("学生id: ",this.student.sid)
                if (this.student.sid) {
                    const res = await studentApi.edit(this.student)
                    if (res.data.code === 200) {
                        this.$message.success(res.data.message)
                        this.dialogFormVisible = false
                        this.student = {}
                        await this.search()
                    } else {
                        this.$message.error(res.data.message)
                    }
                } else {
                    const res = await studentApi.save(this.student)
                    if (res.data.code === 200) {
                        this.$message.success(res.data.message)
                        this.dialogFormVisible = false
                        this.student = {}
                        await this.search()
                    } else {
                        this.$message.error(res.data.message)
                    }
                }
            },
            addStudent() {
                this.dialogFormVisible = true;
                this.student = {}
                this.title = '添加学生'
            },
            // 当pagesize大小发生改变时触发
            handleSizeChange(val) {
                this.pageSize = val
                // this.findByPage()
                this.search()
                console.log(`每页 ${val} 条`);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            // 当页码page发生改变时触发
            handleCurrentChange(val) {
                this.page = val
                // this.findByPage()
                this.search()
                console.log(`当前页: ${val}`);
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.student = row;
                this.title = '修改'
                this.dialogFormVisible = true
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.sids = [];
                if (row) {
                    this.sids.push(row.sid)
                } else {
                    this.sids = this.multipleSelection.map(m => m.sid);
                }
                console.log(this.sids)
                this.$confirm('删除', 'tips', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await studentApi.del(this.sids)
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                        this.student = {}
                        await this.search()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        })
                    }
                })
            }
        }
    }
</script>

<style>

    #app {
        display: flex;
        justify-content: center;
    }

    .el-card {
        width: 90%;
    }

    .el-pagination {
        margin-top: 20px;
        text-align: right;
    }
</style>
